<template>
  <div class="g-inherit m-main p-contacts">

    <div id="userList" class="m-list">
        <group class="u-card">
            <cell :title="'新联系人'"  is-link :link="'/sysmsgs'">
            </cell>
        </group>
        <group v-for="(friend,index) in friendsList">
            <cell :title="friend.groupName"
            is-link
            :border-intent="false"
            :arrow-direction="friend.showContent ? 'up' : 'down'"
            @click.native="showContent(index)"></cell>

            <template v-if="friend.showContent">
                <cell v-for="list in friend.list" :title="list.name" :key="list.account" :link="list.link">
                    <img class="icon" slot="icon" width="20" :src="list.avatar||defaultAvatar">
                </cell>
            </template>

        </group>
    </div>
  </div>
</template>

<script>
import config from '../configs'
export default {
    mounted(){
        this.http.post('/im/user/list')
        .then(res => {
                let data = res.data;
                console.log('联系人名单-----');
                console.log(data);
                if(data.code === 200){
                    this.friendsList = data.data.filter(item => {
                      item.list.filter(tem =>{
                          tem.link = '/namecard/' + tem.imId;
                          return true;
                      });

                      item.showContent = false;
                      return true
                    })
                }
            }
        );
    },

    data () {
        return {
            friendsList: [],
            defaultAvatar:config.defaultUserIcon,
        }
    },
    methods:{
        showContent:function(index){
            let temp = this.friendsList
            temp[index].showContent = ! temp[index].showContent;
            this.friendsList = temp
        }
    }
}
</script>

<style type="text/css">
  .p-contacts {
    .add-friend {
      background-color: #fff;
    }
  .weui-cell{
      background-color:#fff;
  }

    .m-list {
      padding-top:4rem;
    }
    .u-search-box-wrap {
      text-align: center;
    }
    .u-search-box {
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      min-width: 45%;
      padding: 1em;
      height: 3rem;
      text-align: center;
      border: 1px solid #ccc;
      background-color: #fff;
      font-size: 0.8rem;
      box-shadow: 2px 2px 6px #ccc;
      a {
        display: inline-block;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
      }
    }
    .u-card {
      .icon {
        display: inline-block;
        margin-right: 0.4rem;
        width: 1.4rem;
        height: 1.4rem;
        background-size: 20rem;
      }
      .icon-team-advanced {
        background-position: 0 -3rem;
        background-image: url(http://yx-web.nos.netease.com/webdoc/h5/im/icons.png);
      }
      .icon-team {
        background-position: -2.1rem -3rem;
        background-image: url(http://yx-web.nos.netease.com/webdoc/h5/im/icons.png);
      }
    }
  }
</style>
